<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YunYueDu FAQ</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            color: #333;
        }

        header {
            background-color: #0066cc;
            color: white;
            padding: 15px;
            text-align: center;
        }

        header h1 {
            margin: 0;
            font-size: 24px;
        }

        /* 主内容容器 */
        .container {
            max-width: 900px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #0066cc;
            margin-bottom: 10px;
            border-bottom: 2px solid #eee;
            padding-bottom: 5px;
        }

        .faq-item {
            margin-bottom: 20px;
        }

        .faq-item h3 {
            margin: 0;
            cursor: pointer;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-item h3:hover {
            color: #0066cc;
        }

        .faq-item p {
            display: none;
            margin-top: 10px;
            line-height: 1.6;
        }

        .faq-item.open p {
            display: block;
        }

        .toggle-icon {
            transition: transform 0.3s;
        }

        .faq-item.open .toggle-icon {
            transform: rotate(180deg);
        }

        footer {
            background-color: #0066cc;
            color: white;
            text-align: center;
            padding: 10px 0;
            /* position: fixed; */
            bottom: 0;
            width: 100%;
        }

        footer p {
            margin: 0;
        }

        /* 响应式样式 */
        @media (max-width: 768px) {
            .container {
                margin: 10px;
                padding: 15px;
            }

            h2 {
                font-size: 18px;
            }

            .faq-item h3 {
                font-size: 16px;
            }

            header h1 {
                font-size: 20px;
            }
        }

        /* 折叠图标旋转动画 */
        .toggle-icon {
            transition: transform 0.3s;
        }

        .faq-item.open .toggle-icon {
            transform: rotate(180deg);
        }

        /* 淡入效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .faq-header {
            display: flex;
            align-items: center;
            gap: 10px;
            /* 图标与标题之间的间距 */
            margin-bottom: 20px;
            /* 标题下方的间距 */
        }

        /* FAQ Logo 样式 */
        .faq-logo {
            height: 80px;
            width: auto;
            margin-left: 20px;
        }

        /* FAQ 标题文字样式 */
        .faq-header h2 {
            font-size: 24px;
            color: #004080;
            margin: 0;
        }
    </style>
</head>

<body>
    <header>
        <h1 style="display: inline;">YunYueDu FAQ</h1>
    </header>

    <div class="container">
        <div class="faq-header">
            <h2>Frequently Asked Questions (Q&A)</h2>
            <img src="./image1.png" alt="YunYueDu Logo" class="faq-logo">
        </div>
        <!-- <h2>Frequently Asked Questions (Q&A)</h2>
        <img src="./image1.png" alt="YunYueDu Logo" style="height: 50px; vertical-align: middle;"> -->

        <!-- FAQ Item 1 -->
        <div class="faq-item">
            <h3>1. What is Yun Yue Du? <span class="toggle-icon">▼</span></h3>
            <p>YunYueDu is a SEU Library platform for recommending and borrowing Chinese books published after
                2017, delivered directly to users.</p>
        </div>

        <!-- FAQ Item 2 -->
        <div class="faq-item">
            <h3>2. How do I activate YunYueDu? <span class="toggle-icon">▼</span></h3>
            <p>Registered users of Southeast University Library can use their Campus Card number as the username and the
                last six digits of their ID as the password. After logging in, users must bind their phone number to
                activate the service.</p>
        </div>

        <!-- FAQ Item 3 -->
        <div class="faq-item">
            <h3>3. How do I register for YunYueDu? <span class="toggle-icon">▼</span></h3>
            <p><a href="https://www.yuntaigo.com/seu.html" target="_blank">Click here</a> to register for Yun Yue
                Reading.</p>
        </div>

        <!-- FAQ Item 4 -->
        <div class="faq-item">
            <h3>4. Is the return process for YunYueDu books the same as for regular library books? <span
                    class="toggle-icon">▼</span></h3>
            <p>YunYueDu books have a unique return process. They cannot be returned via self-service machines;
                please return them at any SEU campus library’s circulation desk and confirm with staff.</p>
        </div>

        <!-- FAQ Item 5 -->
        <div class="faq-item">
            <h3>5. What do the various prompts on the book ordering page mean? <span class="toggle-icon">▼</span></h3>
            <p>Available for borrowing: You can place an order for this book.<br>
                Max borrowing limit reached for this book: The library already has two copies of this book; it cannot be
                borrowed again.<br>
                Personal borrowing limit reached: You have reached your personal borrowing limit of two books.<br>
                YunYueDu service not activated: Check for overdue books or email fyy@seu.edu.cn.<br>
                Insufficient stock: The book is out of stock.</p>
        </div>

        <!-- FAQ Item 6 -->
        <div class="faq-item">
            <h3>6. Why are the “Add to Cart” and “Order” buttons on the book ordering page grayed out? <span
                    class="toggle-icon">▼</span></h3>
            <p>Check if the status of the book shows “Max borrowing limit reached.” If so, it means the library already
                has two copies of this book, or two readers have already borrowed it. The maximum number of copies
                available for borrowing per book on this platform is two.</p>
        </div>

        <!-- FAQ Item 7 -->
        <div class="faq-item">
            <h3>7. Why can't I find the book I want on the platform? <span class="toggle-icon">▼</span></h3>
            <p>YunYueDu is a platform for newly published books, offering only Chinese books published after
                2017. If you want to recommend other books, visit the “Latest Books” section on the YunYueDu
                homepage, fill in the book details, and submit your recommendation.</p>
        </div>

        <!-- FAQ Item 8 -->
        <div class="faq-item">
            <h3>8. Do I need to pay shipping fees for the books I borrow? <span class="toggle-icon">▼</span></h3>
            <p>The shipping fees for books borrowed through YunYueDu are covered by the library, so readers do
                not need to pay anything. Please pick up your package promptly after receiving the delivery notification
                to avoid unnecessary disputes due to returned packages.</p>
        </div>

        <!-- FAQ Item 9 -->
        <div class="faq-item">
            <h3>9. Do I need to order at least two books per order? <span class="toggle-icon">▼</span></h3>
            <p>With YunYueDu, you can order up to two books per order, but ordering two is optional. After
                returning a book, you can borrow more, as long as you don't exceed the two-book limit.</p>
        </div>

        <!-- FAQ Item 10 -->
        <div class="faq-item">
            <h3>10. Can I track the shipping information of the books after placing an order? <span
                    class="toggle-icon">▼</span></h3>
            <p>After your order is approved by the administrator, you can track the package by clicking on your name in
                the top right corner to enter your personal center, and then selecting “My YunYueDu” -> “My
                Orders.” After receiving the package, confirm the receipt in the same section.</p>
        </div>

        <!-- FAQ Item 11 -->
        <div class="faq-item">
            <h3>11. How long can I borrow books through YunYueDu? <span class="toggle-icon">▼</span></h3>
            <p>YunYueDu books can be borrowed for 30 days, with extensions during holidays. Timely returns are
                required to avoid issues with borrowing or graduation. For inquiries, contact fyy@seu.edu.cn. Severe
                overdue cases may lead to blacklisting and service suspension.</p>
        </div>

        <!-- FAQ Item 12 -->
        <div class="faq-item">
            <h3>12. Who should I contact if I encounter issues with the YunYueDu platform? <span
                    class="toggle-icon">▼</span></h3>
            <p>For any logistics or related issues from order confirmation to receipt, contact the “QQ Inquiry” on the
                YunYueDu homepage. If there are questions about books that have not passed the approval process,
                email fyy@seu.edu.cn.</p>
        </div>


    </div>

    <footer>
        <p>&copy; 2024 Southeast University Library</p>
        <img src="./logo.png" alt="Southeast University Logo" style="height: 40px; margin-top: 5px;">
    </footer>

    <script>
        // 添加折叠功能
        document.querySelectorAll('.faq-item h3').forEach(item => {
            item.addEventListener('click', () => {
                const parent = item.parentElement;
                parent.classList.toggle('open');
            });
        });
    </script>
</body>

</html>